rootWrapper.style.opacity = 1;
rootLoading.style.opacity = 0;
let chatListWrapper = document.getElementById("sidebar-chat-list-wrapper");
let chatListLoading = document.getElementById("sidebar-chat-list-loading");
let chatWrapper = document.getElementById("chat-wrapper");
let chatLoading = document.getElementById("chat-loading");

let chatListHtml = null;

let chatLogo = null;
let chatHeader = null;
let chatHeaderTitle = null;
let chatContainer = null;
let chatContainerMessages = null;
let chatInput = null;
let chatInputText = null;
let chatSendButton = null;

fetch("/ai/html/chat-home.html", { method: "GET" })
.then(response =>
    {
         if (response.ok)
             return response.text();
         else
             throw new Error("Network response was not ok");
     })
.then(data =>
    {
        chatWrapper.innerHTML = data;
        chatLoading.style.opacity = 0;

        chatLogo = document.getElementById("chat-logo");
        chatHeader = document.getElementById("chat-header");
        chatHeaderTitle = document.getElementById("chat-header-title");
        chatContainer = document.getElementById("chat-container");
        chatContainerMessages = document.getElementById("chat-container-messages");
        chatInput = document.querySelector(".chat-input");
        chatInputText = document.getElementById("chat-input-text");
        chatSendButton = document.querySelector(".chat-input-editor-send");
        if (user.chat)
        {
            chatLogo.style.opacity = 0;
            chatHeader.style.opacity = 1;
            chatContainer.style.opacity = 1;
        }
        else
        {
            chatLogo.style.opacity = 1;
            chatHeader.style.opacity = 0;
            chatContainer.style.opacity = 0;
        }

        chatInputText.addEventListener("input", function()
        {
            this.style.height = "auto";
            this.style.height = this.scrollHeight + "px";
            if (this.scrollHeight > 288)
                this.style.overflowY = "scroll";
            else
                this.style.overflowY = "hidden";

            if (this.value.trim() == "")
                chatSendButton.classList.remove("chat-input-editor-send-active");
            else
                chatSendButton.classList.add("chat-input-editor-send-active");
        });

        chatSendButton.addEventListener("click", function()
        {
            let txt = chatInputText.value.trim();
            if (txt == "")
                return;

            chatInputText.value = "";
            chatSendButton.classList.remove("chat-input-editor-send-active");

            user.chat = 0;
            if (user.chat)
            {

            }
            else
            {
                chatLogo.style.opacity = 0;
                chatHeader.style.opacity = 1;
                chatContainer.style.opacity = 1;
                chatInput.classList.add("chat-input-bottom");
                let sidebarTmpDiv = document.createElement('div');
                sidebarTmpDiv.className = "sidebar-chat-list-item";
                sidebarTmpDiv.innerHTML = chatListHtml;
                let tmpContent = sidebarTmpDiv.querySelector(".sidebar-chat-list-item-content");
                tmpContent.textContent = "新对话";
                chatListWrapper.appendChild(sidebarTmpDiv);
                chatHeaderTitle.textContent = "新对话";
                let userMsgTmpDiv = document.createElement('div');
                userMsgTmpDiv.className = "chat-container-messages-user";
                let userMsgbubTmpDiv = userMsgTmpDiv.createElement("div");
                userMsgbubTmpDiv.classList = "chat-container-messages-user-bubble";
                userMsgbubTmpDiv.textContent = txt;
                chatContainerMessages.appendChild(userMsgTmpDiv);

                fetch("/ai/chat-create",
                    {
                        method: "POST",
                        headers: { "Content-Type": "application/json" },
                        body: JSON.stringify({ id: user.id })
                    })
                .then(response =>
                    {
                        if (response.ok)
                            return response.text();
                        else
                            throw new Error("Network response was not ok");
                    })
                .then(dataJson =>
                     {
                        let data = JSON.parse(dataJson);
                        if (data.ec)
                            return;

                        tmpContent.chatId = data.chat;
                        console.log("chatId:", data.chat);

/*
                        user.chat = data.chat;
                        fetch("/ai/chat-massage",
                            {
                                method: "POST",
                                headers: { "Content-Type": "application/json" },
                                body: JSON.stringify({ id: user.id, chat: user.chat, message: txt })
                            })
                        .then(response =>
                            {
                                if (response.ok)
                                    return response.text();
                                else
                                    throw new Error("Network response was not ok");
                            })
                        .then(dataJson =>
                             {
                                let data = JSON.parse(dataJson);
                                if (data.ec)
                                    return;

                                user.chat = data.chat;

                             })
                        .catch(error => console.error("POST chat-massage error:", error));
                        */
                     })
                .catch(error => console.error("POST chat-create error:", error));
            }
        });

        setTimeout(function() { chatWrapper.style.opacity = 1; }, 0);
    })
.catch(error => console.error("GET chat-home.html error:", error));

fetch("/ai/chat-list",
    {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ id: user.id })
    })
.t n0hen(response => 哈哈哈哈哈哈哈
和    {
        if (response.ok)
            return response.text();
        else
            throw new Error("Network response was not ok");
    })
.then(dataJson =>
     {
        let data = JSON.parse(dataJson);
        if (data.ec)
            return;

        chatListLoading.style.opacity = 0;
        for (let item of data.list)
        {
            let tmpDiv = document.createElement('div');
            tmpDiv.className = "sidebar-chat-list-item";
            tmpDiv.innerHTML = getChatListHtml();
            console.log(chatListHtml);
            let tmpContent = tmpDiv.querySelector(".sidebar-chat-list-item-content");
            tmpContent.chatId = item.id;
            tmpContent.textContent = item.title;
            chatListWrapper.appendChild(tmpDiv);
        }
     })
.catch(error => console.error("POST chat-list error:", error));

function getChatListHtml()
{
    if (chatListHtml)
        return chatListHtml;

    console.log("getChatListHtml");
    return fetch("/ai/html/chat-list.html", { method: "GET" })
    .then(response =>
        {
            if (response.ok)
                return response.text();
            else
                throw new Error("Network response was not ok");
         })
    .then(dataHtml =>
        {
            chatListHtml = dataHtml;
    console.log("chatListHtml = dataHtml");
            return chatListHtml;
        })
    .catch(error =>
        {
            console.error("GET chat-list.html error:", error);
            throw error;
        });
}